<template>
  <div class="">
    <Head></Head>
    <div style="margin-left:17%;margin-top:3%">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="font-size:16px"
      >
        <el-breadcrumb-item :to="{ path: '/items' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-row :gutter="20" style="margin-top:50px">
        <el-col :span="12"
          ><div
            class="grid-content2 bg-purple2"
            v-for="(info, j) in item.itemInfoDOList"
            :key="j"
            v-if="j == 0"
          >
            <img
              :src="'data:image/jpg;base64,' + info.itemInfoImg"
              width="500px"
              style="margin-left:350px;margin-top:50px"
            /></div
        ></el-col>
        <el-col :span="12"
          ><div class="grid-content2 bg-purple2">
            <div>
              <span>商品名：</span>
              <span>{{ item.itemName }}</span>
            </div>
            <div v-for="(info, j) in item.itemInfoDOList" :key="j">
              <span v-if="j < 1">商品描述：</span>
              <span>{{ info.itemInfoDescription }}</span>
            </div>
            <div>
              <span>规格：</span>
              <el-radio v-model="radio" label="1">{{
                item.itemSpecification
              }}</el-radio>
            </div>
            <div>
              <span>价格：</span>
              <span>{{ item.itemPrice }}</span>
            </div>
            <div>
              <span>库存：</span>
              <span>{{ item.itemNum }}</span>
            </div>
            <div>
              <span>数量：</span>
              <el-input-number
                v-model="num"
                :min="0"
                :max="item.itemNum"
              ></el-input-number>
            </div>
            <div>
              <el-button type="danger" plain @click="buy">立即购买</el-button>
              <el-button type="danger" @click="addCart">加入购物车</el-button>
            </div>
          </div></el-col
        >
      </el-row>
      <div class="itemInfo" style="text-align: center">
        <span v-for="(info, j) in item.itemInfoDOList" :key="j">
          <img
            width="500px"
            height="500px"
            :src="'data:image/jpg;base64,' + info.itemInfoImg"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Head from "../cart/head";
import { addCartItem } from "../../service/cart";
export default {
  components: {
    Head,
  },
  data() {
    return {
      radio: "",
      num: "",
      ietms: {},
      //库存
      // itemNum:10
    };
  },
  computed: {
    ...mapState("cart", ["item", "cartOrder", "userSerial", "user"]),
  },
  methods: {
     addCart() {
      if (this.user.userState == 2) {
        if (this.num == 0) {
          alert("请选择购买数量");
        } else {
          this.cartOrder.item = this.item;
          this.cartOrder.buyNum = this.num;
          this.cartOrder.typeCode = 0;
          this.cartOrder.userId = this.userSerial; //调用用户方法，获取用户id
          addCartItem(this.cartOrder);
          //验证是否加入成功（未验证）
          alert("加入购物车成功");
        }
      } else {
        alert("账号状态异常，不能使用购买功能，请联网站系管理员");
      }
    },
    buy() {
      //直接购买跳转到结算页面
       if (this.user.userState == 2) {
        if (this.num == 0) {
          alert("请选择购买数量");
        } else {
          this.cartOrder.item = this.item;
          this.cartOrder.buyNum = this.num;
          this.cartOrder.typeCode = 0;
          this.cartOrder.userId = this.userSerial; //调用用户方法，获取用户id
          addCartItem(this.cartOrder);
          
          this.$router.push("/close")
        }
      } else {
        alert("账号状态异常，不能使用购买功能，请联网站系管理员");
      }
      // this.$router.push({ path: "/" });
    },
    ...mapMutations("cart", ["setCartOrder"]),
    ...mapActions("cart", ["setUser"]),
  },
  created() {
    this.setUser();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
  /* &:last-child {
    margin-bottom: 0;
  } */
}
.el-col {
  border-radius: 0px;
}
.bg-purple2-dark {
  background: #fafafa;
}
.bg-purple2 {
  background: #fafafa;
}
.bg-purple2-light {
  background: #fafafa;
}
.grid-content2 {
  border-radius: 0px;
  min-height: 600px;
}
.row-bg {
  padding: 10px 0;
  background-color: #fafafa;
}
.itemInfo {
  width: 50%;
  height: 1000px;
  margin: auto;
  /* border: violet 1px solid; */
  background-color: #fafafa;
}
</style>
